<template>
  <div class="login-container">

    <div class="login-box">

      <div class="login-form">
        <!-- 登录方式切换 -->
        <div class="login-switch">
          <el-image :src="loginMethod === 2 ? require('@/assets/img/login_qr.png') : require('@/assets/img/login_account.png')" @click="handleLoginSwitch" />
        </div>

        <!-- 标题 -->
        <div class="login-title">
          <h3 class="title">CSMS管理系统</h3>
        </div>

        <!-- 账号密码登录 -->
        <el-form v-show="loginMethod=== 2" ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form2" autocomplete="on" label-position="left">

          <el-form-item prop="username">
            <span class="svg-container">
              <u-icon-svg name="user" />
            </span>
            <el-input
              ref="username"
              v-model="loginForm.username"
              placeholder="账号"
              name="username"
              type="text"
              tabindex="1"
              autocomplete="on"
            />
          </el-form-item>

          <el-tooltip v-model="capsTooltip" content="大写锁定打开" placement="right" manual>
            <el-form-item prop="password">
              <span class="svg-container">
                <u-icon-svg name="password" />
              </span>
              <el-input
                :key="passwordType"
                ref="password"
                v-model="loginForm.password"
                :type="passwordType"
                placeholder="密码"
                name="password"
                tabindex="2"
                autocomplete="on"
                @keyup.native="checkCapslock"
                @blur="capsTooltip = false"
                @keyup.enter.native="handleLogin"
              />

              <span class="show-pwd" @click="showPwd">
                <u-icon-svg :name="passwordType === 'password' ? 'eye' : 'eye-open'" />
              </span>
            </el-form-item>
          </el-tooltip>
          <el-button :loading="loading" class="submit" size="medium" @click.native.prevent="handleLogin">登 录</el-button>
        </el-form>

        <!-- 钉钉二维码登录 -->
        <div v-show="loginMethod === 1" class="login-qrcode">
          <div id="login-qrcode" />
        </div>
      </div>

    </div>

    <el-dialog
      :title="captchaTitle"
      :visible.sync="captchaVisible"
      append-to-body
      width="350px"
    >
      <el-form ref="captchaForm" :model="captchaForm" :rules="codeRules">
        <el-row class="captcha_row">
          <el-form-item prop="verifycode">
            <el-input
              v-model="captchaForm.verifycode"
              maxlength="5"
              placeholder="验证码"
              @keyup.enter.native="handleCode"
            />
          </el-form-item>
          <img id="captcha_img" :src="codeUrl" @click="changeCode">
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeCaptchaForm">取 消</el-button>
        <el-button type="primary" @click="handleCode">确 定</el-button>
      </span>
    </el-dialog>
    <u-footer :copyright="copyright" />
  </div>
</template>

<script>
export default {
  name: 'Login',
  data() {
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('密码不能少于6位'))
      } else {
        callback()
      }
    }
    return {
      api: this.$u.api.Open,
      copyright: ' Copyright © 2022 CSMS.',
      loginForm: {
        username: '',
        password: '',
        captcha: ''
      },
      loginRules: {
        username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        password: [{ required: true, trigger: 'blur', validator: validatePassword }]
      },
      passwordType: 'password',
      capsTooltip: false,
      loading: false,
      redirect: undefined,

      // 默认 隐藏验证码
      captchaForm: {
        verifycode: ''
      },
      codeRules: {
        verifycode: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ]
      },
      codeUrl: '',
      captchaTitle: '请输入验证码',
      captchaVisible: false,
      name: '',
      // 登录方式,1默认钉钉二维码登录,2账号密码登录
      loginMethod: 1,
      gateway: '',
      dingtalk_appid: ''
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        const query = route.query
        if (query) {
          this.redirect = query.redirect
        }
      },
      immediate: true
    }
  },
  created() {
    // 初始化钉钉的二维码加载
    this.initDingJs()
  },
  mounted() {
    // 开发环境显示默认账号密码
    if (process.env.NODE_ENV === 'development') {
      this.loginForm = {
        username: 'superadmin',
        password: '000000'
      }
    }

    // 检查登录方式
    if (this.loginMethod === 1) {
      // 钉钉二维码初始化
      this.dingtalkInit()
      // 钉钉二维码登录
      const { code } = this.$route.query
      if (code) {
        // 钉钉二维码登录
        this.handleCodeLogin(code)
      }
    } else {
      // 账号密码登录
      if (this.loginForm.username === '') {
        this.$refs.username.focus()
      } else if (this.loginForm.password === '') {
        this.$refs.password.focus()
      }
    }
  },
  methods: {
    // 登录方式切换
    handleLoginSwitch() {
      this.loginMethod = this.loginMethod === 1 ? 2 : 1
    },
    // 监听回车事件
    checkCapslock(e) {
      const { key } = e
      this.capsTooltip = key && key.length === 1 && (key >= 'A' && key <= 'Z')
    },
    // 显示或隐藏密码
    showPwd() {
      this.passwordType = this.passwordType === 'password' ? '' : 'password'
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    // 登录事件
    handleLogin() {
      // 获取验证码
      this.loginForm.captcha = this.captchaForm.verifycode
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$store.dispatch('user/login', this.loginForm)
            .then(() => {
              this.$u.route(this.redirect || '/')
              this.loading = false
            })
            .catch((err) => {
              this.loading = false
              if (err.code === 50002 || err.code === 50003) {
                this.openCaptchaForm()
              } else {
                this.closeCaptchaForm()
              }
            })
        } else {
          return false
        }
      })
    },
    // 打开验证码提示
    openCaptchaForm() {
      this.captchaVisible = true
      this.changeCode()
    },
    // 关闭验证码提示
    closeCaptchaForm() {
      this.captchaVisible = false
    },
    // 转换码
    changeCode() {
      this.captchaForm.verifycode = ''
      this.codeUrl = this.api.captcha + '?_=' + new Date().getTime()
    },
    // 提交验证码
    handleCode() {
      this.$refs['captchaForm'].validate(valid => {
        if (valid) {
          this.handleLogin()
        }
      })
    },
    // 初始化钉钉的二维码加载
    initDingJs() {
      !(function(window, document) {
        function d(a) {
          let e
          const c = document.createElement('iframe')
          let d = 'https://login.dingtalk.com/login/qrcode.htm?goto=' + a.goto
          // eslint-disable-next-line no-sequences
          d += a.style ? '&style=' + encodeURIComponent(a.style) : '',
          d += a.href ? '&href=' + a.href : '',
          c.src = d,
          c.frameBorder = '0',
          c.allowTransparency = 'true',
          c.scrolling = 'no',
          c.width = a.width ? a.width + 'px' : '365px',
          c.height = a.height ? a.height + 'px' : '400px',
          e = document.getElementById(a.id),
          e.innerHTML = '',
          e.appendChild(c)
        }
        window.DDLogin = d
      }(window, document))
    },
    // 钉钉二维码初始化
    dingtalkInit() {
      const self = this
      // 获取系统配置
      self.api.config().then(res => {
        const { gateway, dingtalk_appid } = res.data

        // 这边需要用 $nextTick() 方法来等DOM渲染完成后，才能获取到盒子容器
        self.$nextTick(() => {
          // 回调地址
          const redirect_uri = encodeURIComponent(gateway + '/#/login')
          // 请求钉钉二维码链接
          const url = `https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=${dingtalk_appid}&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=${redirect_uri}`

          // 钉钉自己的url 修改上面俩，不需要动这个
          window.DDLogin({
            id: 'login-qrcode',
            goto: encodeURIComponent(url), // 请参考注释里的方式
            style: 'border:none;background-color:#FFFFFF;',
            width: '365', // 官方参数 365
            height: '400'// 官方参数 400
          })

          // 此步拿到临时loginTmpCode换取正式code
          const handleLoginTmpCode = (loginTmpCode) => {
            window.location.href = `${url}&loginTmpCode=${loginTmpCode}`
          }

          // 判断是否来自ddLogin扫码事件
          const handleMessage = (event) => {
            if (event.origin === 'https://login.dingtalk.com') {
              handleLoginTmpCode(event.data)
            }
          }
          // 监听事件
          if (typeof window.addEventListener !== 'undefined') {
            window.addEventListener('message', handleMessage, false)
          } else if (typeof window.attachEvent !== 'undefined') {
            window.attachEvent('onmessage', handleMessage)
          }
        })
      }).catch(err => {
        console.error(err)
      })
    },
    // 钉钉扫码登录
    handleCodeLogin(code) {
      this.$store.dispatch('user/dingtalkCodeLogin', { code })
        .then(() => {
          this.$u.route('/')
        })
        .catch(err => {
          console.log('钉钉扫码登录异常')
          console.log(err)
        })
    }
  }
}
</script>

<style lang="scss">
/* 修复input 背景不协调 和光标变色 */

$bg:#283443;
$light_gray:#707070;
$cursor: #f0f2f5;
$bg_itme:#f0f2f5;

@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
  .login-container .el-input input {
    color: $cursor;
  }
}

/* reset element-ui css */
.login-container {
  .el-input {
    display: inline-block;
    height: 47px;
    width: 85%;

    input {
      background: transparent;
      border: 0;
      -webkit-appearance: none;
      border-radius: 0;
      padding: 12px 5px 12px 15px;
      color: $light_gray;
      height: 47px;
      caret-color: $cursor;

      &:-webkit-autofill {
        box-shadow: 0 0 0 1000px #fff inset !important;
        -webkit-text-fill-color: #707070 !important;
      }
    }
  }

  .el-form-item {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: $bg_itme;
    border-radius: 5px;
    color: #454545;
  }
}
</style>

<style lang="scss" scoped>
$bg:#f0f2f5;
$dark_gray:#889aa4;
$light_gray:#515a6e;

.login-container {
  min-height: 100%;
  width: 100%;
  background: $bg url("../../assets/login_images/login-bg.jpg") no-repeat fixed;
  background-size: cover;
  overflow: hidden;
  display: grid;

  .login-box{
    display: flex;
    align-items: center;
    text-align: center;
    margin: 0 auto;

    .login-form{
      width: 500px;
      background: #FFFFFF;
      padding: 40px;
      position: relative;

      .login-switch{
        width: 53px;
        height: 53px;
        position: absolute;
        right: 10px;
        top: 10px;
        cursor: pointer;
      }

      .login-title {
        position: relative;

        .title {
          font-size: 26px;
          color: $light_gray;
          margin: 40px auto;
          text-align: center;
          font-weight: bold;
          text-shadow: 8px 8px 16px #d1d9e6, -8px -8px 16px #f9f9f9;
        }
      }

      .login-qrcode{
        margin-top: -0.5rem;
        margin-bottom: -0.5rem;
        transform: translateZ(0px);
        opacity: 1;

        .qrcode{
          position: relative;
          display: inline-block;
        }
      }
    }

  }

  .submit{
    width:100%;
    padding: 15px 20px;
    margin-bottom:30px;
    color: #fff;
    background-color: #4B70E2;
    border-color: #4B70E2;
    box-shadow: 8px 8px 16px #d1d9e6, -8px -8px 16px #f9f9f9;
  }
  .submit:hover{
    color:#fff;
    background:#5d7de2;
    border-color:#5d7de2;
  }

  .tips {
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;

    span {
      &:first-of-type {
        margin-right: 16px;
      }
    }
  }

  .svg-container {
    padding: 6px 5px 6px 15px;
    color: $dark_gray;
    vertical-align: middle;
    width: 30px;
    display: inline-block;
  }

  .show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
    user-select: none;
  }

  .thirdparty-button {
    position: absolute;
    right: 0;
    bottom: 6px;
  }

  @media only screen and (max-width: 470px) {
    .thirdparty-button {
      display: none;
    }
  }

}

.captcha_row {
  float: left;
  margin: 10px;
  bottom: 20px;

  div {
    width: 120px;
    float: left;
  }

  img {
    width: 120px;
    margin-left: 5px;
    float: left;
  }

  #captcha_img {
    height: 32px;
    cursor: pointer;
  }
}

</style>
